<template>
  <div>
    <!-- 轮播图区域 -->
    <div class="banner-section mb-6">
      <BannerCarousel @banner-click="handleBannerClick" />
    </div>
    
    <!-- 账号列表区域 -->
    <AccountList
      :data="accounts"
      :loading="loading"
      :pagination-config="pagination"
      @table-change="handleTableChange"
      @view="handleView"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import accountAPI from '~/api/account'
import AccountList from '~/components/AccountList.vue'
import BannerCarousel from '~/components/BannerCarousel.vue'

const accounts = ref([])
const loading = ref(false)
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: total => `共 ${total} 条`
})

// 分页/排序/筛选变化
const handleTableChange = ({ pagination: paginationData, filters, sorter }) => {
  fetchAccounts(paginationData.current, paginationData.pageSize, sorter)
}

// 查看账号
const handleView = (account) => {
  // 跳转到账号详情页
  navigateTo(`/accounts/${account._id}`)
}

// 处理轮播图点击
const handleBannerClick = (banner) => {
  console.log('轮播图点击:', banner)
  // 可以在这里添加自定义的处理逻辑
}

// 获取数据
const fetchAccounts = async (page = 1, pageSize = 10, sorter = null) => {
  loading.value = true
  try {
    const params = { page, limit: pageSize }
    
    // 添加排序参数
    if (sorter && sorter.field && sorter.order) {
      params.sortBy = sorter.field
      params.sortOrder = sorter.order === 'ascend' ? 'asc' : 'desc'
    }
    
    const res = await accountAPI.getAccounts(params)
    if (res.code === 200) {
      accounts.value = res.data.list
      pagination.value.total = res.data.total
      pagination.value.current = page
      pagination.value.pageSize = pageSize
    } else {
      message.error(res.message || '获取数据失败')
    }
  } catch (e) {
    message.error('网络错误')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  fetchAccounts()
})
</script>


